import Config from './Config.js'
import Area from './area.js';

// 获取画布
const canvas = document.getElementById('canvas');
// 初始化画布宽度
canvas.width = Config.width;
// 初始化画布高度
canvas.height = Config.height;
// 添加画笔
const context = canvas.getContext('2d');

// 生成场景
let area = new Area(context);
// 初始化泡泡
area.init();
// 鼠标按下事件
canvas.addEventListener('mousedown', e => {
  // 获取点击位置
  const canvasPosition = area.getCanvasPosition(e);
  // 判断是否点在圆内
  const bubbleRef = area.ifInBubble(canvasPosition);
  if (bubbleRef) {
    // 改变鼠标指针为移动状态
    canvas.style.cursor = 'all-scroll';
    // 改变泡泡移动状态
    area.changeState(bubbleRef.id, 1);
    // 注册鼠标移动事件处理函数
    document.onmousemove = move.bind(bubbleRef);
    // 注册松开鼠标事件处理函数
    document.onmouseup = stop.bind(bubbleRef);
  }
})

// 鼠标移动处理函数
function move(e) {
  // 当前鼠标指针位置
  const canvasPosition = area.getCanvasPosition(e);
  console.log(canvasPosition, 'move');
  // 泡泡跟随鼠标移动
  area.bubbleMove(this.id, canvasPosition);
}

// 松开鼠标处理函数
function stop(e) {
  // 改变鼠标指针为正常状态
  canvas.style.cursor = 'auto';
  // 当前鼠标指针位置
  const canvasPosition = area.getCanvasPosition(e);
  console.log(canvasPosition, 'stop');
  // 改变泡泡移动状态
  area.changeState(this.id, 0);
  // 释放鼠标事件处理函数
  document.onmousemove = document.onmouseup = null;
}

// 渲染动画
function loop() {
  // 存档
  context.save();
  // 清空
  context.clearRect(0, 0, canvas.width, canvas.height)
  // 渲染
  area.render();
  // 恢复
  context.restore();
  // 循环
  requestAnimationFrame(loop);
}
// 触发动画
requestAnimationFrame(loop);


// 暂停按钮元素
const stopButton = document.getElementById('stopRender');

// 暂停按钮点击事件
stopButton.addEventListener('click', () => {
  // 获取暂停状态
  const isSuspended = area.suspendBtn();

  // 根据暂停状态设置按钮文本
  if (isSuspended) {
    stopButton.innerText = '暂停';
  } else {
    stopButton.innerText = '继续';
  }
});

